<template>
	<div class="grid xl:grid-cols-3 lg:grid-cols-1 grid-cols-1 mt-10">
		<div>
			<p class="text-center py-[10px] text-t-1">{{ $t('rewards.vipBonus') }}</p>
			<table class="vip-perks-table w-full">
				<thead class="table-header">
					<tr>
						<th style="width: 5%"><div style="height: 0.64rem" /></th>
						<th>{{ $t('rewards.vipBenefits.tableLevelUpBonus') }}</th>
						<th>{{ $t('rewards.vipBenefits.tableDepositBonus') }}</th>
						<th>{{ $t('rewards.vipBenefits.tableWeeklyCashback') }}</th>
						<th>
							<ComingSoonTooltip />
							{{ $t('rewards.vipBenefits.tableWeeklyBonus') }}
						</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in config?.vip" :key="item._id">
						<td>
							<base-image
								class="w-[40px] aspect-square block"
								:src="item.baseVip.logo"
								alt=""
								type="server" />
						</td>
						<td>
							{{
								fmtAmount(item.growthBonus.bonusCap, {
									hideCurrenySymbol: true
								})
							}}
						</td>
						<td>
							<div class="flex justify-end items-center gap-1">
								<span>{{ percentage(item.conditionalBonus?.bonusPercentage, true) }}</span>
								<img src="@/assets/img/activity/vip-table/max.svg" alt="" class="icon-small-size" />
							</div>
						</td>
						<td>
							{{ percentage(item.cashback.bonusPercentage, true) }}
						</td>
						<td>
							<base-icon
								v-if="RewardsData.vip[item.baseVip.level]?.weeklyBonus"
								name="correct2"
								class="checked-icon" />
						</td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="bg-bg-3 rounded-[4px]">
			<p class="text-center py-[10px] text-t-1">{{ $t('rewards.vipRebates') }}</p>
			<table class="vip-perks-table w-full">
				<thead class="table-header">
					<tr>
						<th>{{ $t('rewards.vipBenefits.sports') }}</th>
						<th>{{ $t('rewards.vipBenefits.sportsCopy') }}</th>
						<th>{{ $t('rewards.vipBenefits.slots') }}</th>
						<th>{{ $t('rewards.vipBenefits.casino') }}</th>
						<th>
							<ComingSoonTooltip />
							{{ $t('rewards.vipBenefits.originals') }}
						</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in config?.vip" :key="item._id">
						<td>{{ percentage(item.rebate.sportsBonus, true) }}</td>
						<td>
							{{ percentage(item.rebate.loseCopiedBonus, true) }}
						</td>
						<td>{{ percentage(item.rebate.slotsBonus, true) }}</td>
						<td>{{ percentage(item.rebate.casinoBonus, true) }}</td>
						<td>
							{{ percentage(RewardsData.vip[item.baseVip.level]?.originals, false) }}
						</td>
						<td></td>
					</tr>
				</tbody>
			</table>
			<div class="vip-rebate-note rich-text-area ml-10">
				<div class="marker-1em">
					{{ $t('rewards.vipBenefits.sportsCopyNote1') }}
				</div>
				<div class="marker-1em">
					{{ $t('rewards.vipBenefits.sportsCopyNote2') }}
				</div>
				<div class="marker-1em">
					{{ $t('rewards.vipBenefits.sportsCopyNote3') }}
				</div>
			</div>
		</div>

		<div>
			<p class="text-center py-[10px] text-t-1">{{ $t('rewards.vipPerks') }}</p>
			<table class="vip-perks-table w-full">
				<thead class="table-header">
					<tr>
						<th>
							{{ $t('rewards.vipBenefits.xpMultiplier') }}
						</th>
						<th>{{ $t('rewards.vipBenefits.bigBets') }}</th>
						<th>{{ $t('rewards.vipBenefits.paymentPriority') }}</th>
						<th>{{ $t('rewards.vipBenefits.vipHost') }}</th>
						<th class="special-events">
							{{ $t('rewards.vipBenefits.specialEvents') }}
						</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="item in config?.vip" :key="item._id">
						<td>
							<template v-if="RewardsData.vip[item.baseVip.level]?.xpMultiplier">
								{{ RewardsData.vip[item.baseVip.level]?.xpMultiplier }}x
							</template>
						</td>
						<td>
							<div
								v-if="RewardsData.vip[item.baseVip.level]?.bb"
								class="wrap-bb-icon flex gap-1 items-center justify-end">
								<!--							<img src="@/assets/img/rewards/vip-benefits/bb.svg" alt="" class="icon-small-size" />-->
								<img
									src="@/assets/img/activity/vip-benefits/bb.svg"
									alt=""
									class="icon-small-size" />
								<span>x{{ RewardsData.vip[item.baseVip.level]?.bb }}</span>
							</div>
						</td>
						<td>
							<base-icon
								v-if="RewardsData.vip[item.baseVip.level]?.paymentPriority"
								name="correct2"
								class="checked-icon" />
						</td>
						<td>
							<base-icon
								v-if="RewardsData.vip[item.baseVip.level]?.vipHost"
								name="correct2"
								class="checked-icon" />
						</td>
						<td>
							<base-icon
								v-if="RewardsData.vip[item.baseVip.level]?.specialEvents"
								name="correct2"
								class="checked-icon" />
						</td>
						<td></td>
					</tr>
				</tbody>
			</table>
			<div class="vip-rebate-note rich-text-area ml-10">
				<div class="marker-1em">
					{{ $t('rewards.vipBenefits.multiplierNote') }}
				</div>
				<div class="marker-1em">
					{{ $t('rewards.vipBenefits.paymentPriorityNote') }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { fmtAmount, percentage } from '@/utils'
import { useActivityStore } from '@/store'
import { BaseIcon, BaseImage } from '@/components/base'
import { RewardsData } from './rewards-data.ts'
import ComingSoonTooltip from '../coming-soon-tooltip/index.vue'

const activityStore = useActivityStore()
const config: any = computed(() => activityStore.config)
</script>

<style lang="scss" scoped>
table {
	.table-header {
		//position: sticky;
		top: 0;
		z-index: 10;
		//background: var(--color-bg-5);
		color: var(--color-text-2);
		font-size: 10px;
		border-radius: 4px;
		tr {
			background: var(--color-bg-5);
		}
		th {
			width: 6.5%;
			position: relative;
			height: 40px;
			line-height: 1.2;
			padding: 3px 0;
			vertical-align: middle;
			text-align: end;
			white-space: pre-line;
			&:last-child {
				width: 3%;
			}
		}
		//.special-events {
		//	width: 20%;
		//}
	}
	tbody {
		tr {
			//padding: 4px 0;
			td {
				text-align: end;
				color: var(--color-text-2);
				font-size: 12px;
				vertical-align: middle;
				&:last-child {
					width: 3%;
				}
			}
			&:nth-child(even) {
				background: var(--color-bg-5);
				//background-color: var(--color-bg-2);
				border-radius: 4px;
			}
		}
	}
	.checked-icon {
		color: var(--color-success);
		font-size: 18px;
	}
}
.vip-rebate-note {
	color: var(--color-text-3);
	font-size: 12px;
	padding: 10px 0 8px;
	div,
	p {
		line-height: 16px;
	}
}
table.vip-perks-table {
	.table-header {
		th {
			width: 5.5%;
			&:last-child {
				width: 3%;
			}
		}
	}
	tbody {
		tr {
			td {
				&:last-child {
					width: 3%;
				}
			}
		}
	}
}
td {
	height: 40px;
	padding: 0 !important;
	margin: 0 !important;
}
</style>
